<!--
* description: 备件选择弹窗
* author:xuliwen
* createdDate:2021-2-3
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader
      slot="title"
      :title="titleName"
      :style-type="$store.state.app.dialogType"
    />
    <!-- 显示按钮的onetabel -->
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-is-show-select="true"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="false"
      :dynamic-is-init-table="true"
      :callbackObj="callbackObj"
      :dynamic-api-style="'restful'"
    />
  </el-dialog>
</template>

<script>
import dialogHeader from "@/components/dialogHeader";
import OneTableTemplate from "@/components/templates/oneTable";
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import api from "@/api/pa/apiBranchWarehouse";
export default {
  components: {
    dialogHeader,
    OneTableTemplate,
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false,
    },
     warehouseId: {
      type: String,
      default: '',
    },
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path;
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);
    return {
      selectionData:[],
      editPopupsVisible: false,
      editPopupsState: "add",
      titleName: "备件选择",
      // api配置
      apiConfig: api.queryParts,

      // 动态组件-按钮
       tableButtons: [
        {
          conmpKey: "btenKey1",
          type: "primary",
          size: "small",
          name: "search",
          text: this.$t('sys.button.query'),
          clickEvent: () => this.queryTable(1),
          position: "right",
          fuzzySearch: true
        },
        {
          conmpKey: 'btenKey2',
          type: '',
          size: 'small',
          clickEvent: () => this.saveList(),
          text: '确定',
          position: 'right'
        },
        {
          conmpKey: "btenKey3",
          type: "",
          size: "small",
          text: "重置",
          // clickEvent: () => this.reset(),
          position: "right",
        },
      ],
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "compKey1",
          labelName: "备件编码：",
          codeField: "partNo",
          component: () => import("@/components/org/commonInput"),
          type: "inputText",
          isMust: true,
        },
        {
          compKey: "compKey2",
          labelName: "备件名称：",
          codeField: "partName",
          component: () => import("@/components/org/commonInput"),
          type: "inputText",
          isMust: true,
        },
        {
          compKey: "compKey3",
          labelName: "备件状态：",
          codeField: "partStatus",
          component: () => import("@/components/org/LookupValue"),
          oFields: "statusId,statusText",
          options: [
            { statusId: "1", statusText: "启用" },
            { statusId: "0", statusText: "停用" },
          ],
          type: "dropdownList",
          isMust: true,
        },
        {
          compKey: "compKey4",
          labelName: "备件类别：",
          codeField: "partRepairType",
          component: () => import("@/components/org/LookupValue"),
          oFields: "statusId,statusText",
          options: [
            { statusId: "1", statusText: "启用" },
            { statusId: "0", statusText: "停用" },
          ],
          type: "dropdownList",
          isMust: true,
        },
        {
          compKey: "compKey5",
          labelName: "销售开关：",
          codeField: "isSale",
          component: () => import("@/components/org/LookupValue"),
          oFields: "statusId,statusText",
          options: [
            { statusId: "1", statusText: "启用" },
            { statusId: "0", statusText: "停用" },
          ],
          type: "inputText",
          isMust: true,
        },
        {
          compKey: "compKey6",
          labelName: "订货开关：",
          codeField: "isOrder",
          component: () => import("@/components/org/LookupValue"),
          oFields: "statusId,statusText",
          options: [
            { statusId: "1", statusText: "启用" },
            { statusId: "0", statusText: "停用" },
          ],
          type: "dropdownList",
          isMust: true,
        },
        {
          compKey: "compKey7",
          labelName: "供应商：",
          codeField: "supplierCode",
          component: () => import("@/components/org/commonInput"),
          type: "inputText",
          isMust: true,
        },
        {
          compKey: "compKey8",
          labelName: "适用车型：",
          codeField: "carConfigIdList",
          component: () => import("@/components/org/commonInput"),
          type: "dropdownList",
          isMust: true,
        },
      ],
      callbackObj: {
        // 手动勾选网格时，拿到勾选网格的数据
        onCheckSelect: (selection) => {
          this.selectionData = selection
        },
      },
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "partNo",
                label: "备件编码",
                align: "center",
              },
              {
                prop: "partName",
                label: "备件名称",
                align: "center",
              },
              // {
              //   prop: "partStatusName",
              //   label: "备件状态",
              //   align: "center",
              // },
              // {
              //   prop: "partAttrName",
              //   label: "备件属性",
              //   align: "center",
              // },
              {
                prop: "partType",
                label: "备件类别",
                align: "center",
              },
              {
                prop: "unit",
                label: "单位",
                align: "center",
              },
              {
                prop: "minSalesPage",
                label: "最小销售包装",
                align: "center",
              },
              {
                prop: "carConfigIdList",
                label: "适用车型",
                align: "center",
              },
              // {
              //   prop: "isRetrospect",
              //   label: "追溯备件",
              //   align: "center",
              // },
              {
                prop: "supplierCode",
                label: "供应商编码",
                align: "center",
              },
              {
                prop: "supplierName",
                label: "供应商名称",
                align: "center",
              },
              {
                prop: "remark",
                label: "备注",
                align: "center",
              },
            ],

      formField: {
          partNo: "",
          partName: "",
          partStatus: "",
          partRepairType: "",
          isSale: "",
          isOrder: "",
          supplierCode: "",
          carConfigIdList: ""
      },
    };
  },
  watch: {
    popupsVisible(val,old){
        if(val){
            this.formField.warehouseId=this.warehouseId
            this.queryTable(1)
        }
    }
  },
  methods: {
    // 确定
    saveList() {
      this.$emit('partChoosed',this.selectionData)
      this.popupsVisible = false
    },
    showEdit() {
      this.editPopupsVisible = true;
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit("sendCodeClose");
    },
  },
};
</script>
<style lang='scss' scoped>
/deep/ .el-dialog {
  margin-top: 5rem !important;
}
</style>
